<template>
  <Dialog :title="title" :loading="loading" :visible="visible" button-text="保存" class="scheduling" :reveal="true" @close="handleClose" @confirm="balanceSubmit">
    <!-- 增加排班计划 -->
    <el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-form-item label="计划周期：">
        <el-date-picker
          v-model="ruleForm.startTime"
          type="week"
          format="yyyy 第 WW 周"
          placeholder="选择周"
          :picker-options="{'firstDayOfWeek': 1}"
          style="width:200px"
          @change="startTimeHandle"
        />
        <el-button style="margin-left:20px">快速复制前1周计划</el-button>
      </el-form-item>
      <el-form-item label="咨询师：" />
      <el-form-item label="默认工作时间：">
        <el-time-picker
          v-model="ruleForm.workTime"
          is-range
          range-separator="~"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
          style="width:200px"
          value-format="HH:mm"
          format="HH:mm"
        />
        <el-button style="margin-left:20px" @click="fillWorkingDay">快速填满工作日</el-button>
      </el-form-item>
      <el-table :data="consultantList" border :row-class-name="tableColor">
        <el-table-column label="姓名" prop="manName" />
        <el-table-column label="周一" prop="monday">
          <template slot-scope="{ row }">
            <span v-if="!row.monday"><el-button type="text" @click="fillInDate(row, 'monday')">快速填写</el-button></span>
            <el-time-picker
              v-if="row.monday"
              v-model="row.mondayTime"
              is-range
              range-separator="~"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              style="width:140px;margin-left:-10px"
              value-format="HH:mm"
              format="HH:mm"
            />
          </template>
        </el-table-column>
        <el-table-column label="周二" prop="tuesday">
          <template slot-scope="{ row }">
            <span v-if="!row.tuesday"><el-button type="text" @click="fillInDate(row, 'tuesday')">快速填写</el-button></span>
            <el-time-picker
              v-if="row.tuesday"
              v-model="row.tuesdayTime"
              is-range
              range-separator="~"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              style="width:140px;margin-left:-10px"
              value-format="HH:mm"
              format="HH:mm"
            />
          </template>
        </el-table-column>
        <el-table-column label="周三" prop="wednesday">
          <template slot-scope="{ row }">
            <span v-if="!row.wednesday"><el-button type="text" @click="fillInDate(row, 'wednesday')">快速填写</el-button></span>
            <el-time-picker
              v-if="row.wednesday"
              v-model="row.wednesdayTime"
              is-range
              range-separator="~"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              style="width:140px;margin-left:-10px"
              value-format="HH:mm"
              format="HH:mm"
            />
          </template>
        </el-table-column>
        <el-table-column label="周四" prop="thursday">
          <template slot-scope="{ row }">
            <span v-if="!row.thursday"><el-button type="text" @click="fillInDate(row, 'thursday')">快速填写</el-button></span>
            <el-time-picker
              v-if="row.thursday"
              v-model="row.thursdayTime"
              is-range
              range-separator="~"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              style="width:140px;margin-left:-10px"
              value-format="HH:mm"
              format="HH:mm"
            />
          </template>
        </el-table-column>
        <el-table-column label="周五" prop="friday">
          <template slot-scope="{ row }">
            <span v-if="!row.friday"><el-button type="text" @click="fillInDate(row, 'friday')">快速填写</el-button></span>
            <el-time-picker
              v-if="row.friday"
              v-model="row.fridayTime"
              is-range
              range-separator="~"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              style="width:140px;margin-left:-10px"
              value-format="HH:mm"
              format="HH:mm"
            />
          </template>
        </el-table-column>
        <el-table-column label="周六" prop="saturday">
          <template slot-scope="{ row }">
            <span v-if="!row.saturday"><el-button type="text" @click="fillInDate(row, 'saturday')">快速填写</el-button></span>
            <el-time-picker
              v-if="row.saturday"
              v-model="row.saturdayTime"
              is-range
              range-separator="~"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              style="width:140px;margin-left:-10px"
              value-format="HH:mm"
              format="HH:mm"
            />
          </template>
        </el-table-column>
        <el-table-column label="周日" prop="sunday">
          <template slot-scope="{ row }">
            <span v-if="!row.sunday"><el-button type="text" @click="fillInDate(row, 'sunday')">快速填写</el-button></span>
            <el-time-picker
              v-if="row.sunday"
              v-model="row.sundayTime"
              is-range
              range-separator="~"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              style="width:140px;margin-left:-10px"
              value-format="HH:mm"
              format="HH:mm"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button v-if="row" type="text" @click="deleteBtn(row.manId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row><el-button type="text">+ 增加</el-button></el-row>
    </el-form>
  </Dialog>
</template>
<script>
import Dialog from "@/components/Dialog";
import { tableColor } from '@/utils/common.js';
export default {
  components: {
    Dialog,
  },
  props: {
    currentRow: {
      type: Object,
      default: () => ({}),
    },
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      ruleForm: {
        workTime: ["9:00", "18:00"],
      },
      consultantList: [],
      consultant: [],
      tableColor,
      loading: false,
      rules: {},
    };
  },
  watch: {
  },
  mounted() {
    this.attributionConsultant();
  },
  methods: {
    async attributionConsultant(name) {
      this.consultantList = [];
      this.consultant = [];
      const res = await this.$api["data/hospitalStaff/getAllByJobName"]({
        hospitalJobName: "咨询师",
      });
      if (res.code !== 200) return;
      console.log(res.data);
      res.data.forEach(item => {
        const json = {
          manId: item.id,
          manName: item.usrName,
        };
        this.consultant.push(json);
      });
      this.consultantList = JSON.parse(JSON.stringify(this.consultant));
    },
    handleClose() {
      this.$emit("handleClose");
    },
    balanceSubmit() {
      this.$refs.ruleForm.validate(async valid => {
        if (!valid) return;
      });
    },
    startTimeHandle(val) {
      const date = new Date(val);
      console.log(date.getFullYear(), date.getMonth() + 1, date.getDate());
    },
    fillInDate(row, name) {
      if (!this.ruleForm.workTime || this.ruleForm.workTime.length === 0) {
        this.$message.error("请选择默认工作时间");
      }
      this.$set(row, name, true);
      row[name + "Time"] = this.ruleForm.workTime;
      // this.$set(row[name], 'workTime', this.ruleForm.workTime);
      return row;
    },
    fillWorkingDay() {
      if (!this.ruleForm.workTime || this.ruleForm.workTime.length === 0) {
        this.$message.error("请选择默认工作时间");
      }
      this.consultantList.forEach(item => {
        item = this.dateToConfigure(item);
      });
    },
    dateToConfigure(item) {
      const weekList = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday'];
      weekList.forEach(name => {
        Object.assign(item, this.fillInDate(item, name));
      });
      return item;
    },
    async deleteBtn(id) {
      console.log(id);
      const confirmResult = await this.$confirm('请确认是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err);
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除');
      }
      this.consultantList.forEach((item, index) => {
        if (item.manId === id) {
          this.consultantList.splice(index, 1);
          index--;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
